<template>
    <div id="activityComment">
        <div class="topi">
             <!-- <el-select class="selectac" v-model="eventId" placeholder="选择活动">
                <el-option v-for="item in options"   :key="item.value" :label="item.label"
                :value="item.value">
                </el-option>
            </el-select> -->
            <el-select v-model="scheduleId" placeholder="选择日程">
                <el-option v-for="item in daylist"   :key="item.schId" :label="item.operation"
                :value="item.schId">
                </el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search"></el-button>
        </div>
         <el-table :data="tableData" border  style="width: 100%">
            <el-table-column v-for="col in tableCols" :key="col.id"  :prop="col.prop"
            :label="col.label">
            </el-table-column>
            <el-table-column  label="操作"  align="center" width="172">
                <template slot-scope="scope">
                  <el-button type="text" size="normally"  @click="view(scope.row)">查看</el-button>
                  <el-button type="text" size="normally"  @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="pageinfo" background layout="prev, pager, next" limit='10'
          @current-change='changeCurrentPage'
          :total="totals">
        </el-pagination>
        <div style="clear:both"></div>
        <el-button class="goback" type='primary' @click="goback">返回</el-button>

        <el-dialog
          title="评论"
          :visible.sync="dialogVisible"
          width="30%"
          center>
          <img v-if="imgurl != ''" :src='imgurl'/>
          <p>{{content}}</p>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
    </div>
 
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        tableCols: [
            {id: 3, prop: 'commentId', label: 'id'}, {id: 1, prop: 'phone', label: '手机'}, {id: 2, prop: 'userName', label: '姓名/法号'},
            {id: 4, prop: 'eventTitle', label: '活动名称'}, {id: 5, prop: 'operation', label: '参加日程'}, {id: 6, prop: 'postDate', label: '评论时间'}
        ],
        options: [],
        daylist: [],
        eventId: '', // 活动id
        scheduleId: '', // 日程id
        searchdate: '',
        dialogVisible: false,
        content: '', //评论内容
        imgurl: '', //评论图片
        currentPage: 1,
        totals: 0
      }
    },
    mounted() {
      this.getDayList()
      this.getTableData()
    },
    methods: {
        changeCurrentPage(page) {
          this.currentPage = page
          this.getTableData()
        },
        del(row) {
          let param = {
              commentId: row.commentId
          }
          this.$api.apiDelComment(param, res => {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.getTableData()
          })
        },
        view(row) {
            this.dialogVisible = true
            let param = {
              commentId: row.commentId
            }
            this.$api.apiGetCommentDetail(param, res => {
                this.content = res.data.content
                this.imgurl = JSON.parse(res.data.imgJson)
            })
        },
        
        goback() {
            this.$router.go(-1)
        },
        getDayList() {
          // 活动日程下拉框
          let param = {
            eventId: this.$route.query.eventId
          }
          this.$api.apiGetDaySelect(param, res => {
            this.daylist = res.data
          })
        },
        getTableData() {
          let param = {
            eventId: this.$route.query.eventId,
            scheduleId: this.scheduleId,
            page: this.currentPage,
            limit: 10
          }
          this.$api.apiGetCommentList(param, res => {
            this.tableData = res.data;
            this.totals = res.pageInfo.total;
          })
        }
    }
  }
</script>
<style lang="scss">
#activityComment {
  .topi {
        display: flex;
        width: 80%;
        margin-bottom: 30px;
        .selectac {
            margin-right: 25px;
        }
    }
}
    
</style>
